<template>
  <el-card class="box-card">
    <!-- 搜索与添加区域 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="bookName.bookTitle">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="findAll()"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="bookId" label="编号" style="width: 30%">
      </el-table-column>
      <el-table-column prop="bookTitle" label="书名" style="width: 30%">
      </el-table-column>
      <el-table-column prop="bookAuthor" label="作者" style="width: 30%">
      </el-table-column>
      <el-table-column prop="bookPublisher" label="出版社" style="width: 30%">
      </el-table-column>
      <el-table-column prop="categoryName" label="类别" style="width: 30%">
      </el-table-column>
      <el-table-column prop="bookInventory" label="库存" style="width: 30%">
      </el-table-column>
      <el-table-column lable="操作" style="width: 25%">
        <template slot-scope="scope">
          <el-button
            type="success"
            plain
            @click="applyBook(scope.row)"
            :disabled="scope.row.bookInventory == 0"
            >申请借阅</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 page-size当前显示多少页  total显示总条数 current-page当前页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[1, 3, 5, 7]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>
  
  <script>
export default {
  data() {
    return {
      tableData: [],
      bookName: { bookTitle: '' },
      addbook: {
        bookTitle: '',
        bookAuthor: '',
        bookPublisher: '',
        categoryId: '',
        bookInventory: '',
      },
      addDialogVisible: false,
      page: 1,
      total: 0,
      currentpage: 1,
      categoryList: [],
      info: {},
    }
  },
  created() {
    this.findAll()
  },
  methods: {
    // 获取当前时间
    getCurrentTime() {
      let yy = new Date().getFullYear()
      let mm =
        new Date().getMonth() + 1 < 10
          ? '0' + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1
      let dd =
        new Date().getDate() < 10
          ? '0' + (new Date().getDate() + 1)
          : new Date().getDate() + 1
      let hh =
        new Date().getHours() < 10
          ? '0' + new Date().getHours()
          : new Date().getHours()
      let mf =
        new Date().getMinutes() < 10
          ? '0' + new Date().getMinutes()
          : new Date().getMinutes()
      let ss =
        new Date().getSeconds() < 10
          ? '0' + new Date().getSeconds()
          : new Date().getSeconds()
      return yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
    },

    // 申请借阅图书
    async applyBook(row) {
      this.info.userId = window.localStorage.getItem('uid')
      this.info.bookId = row.bookId
      this.info.borrowTime = this.getCurrentTime()

      await this.$confirm('确定借阅该图书吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          // 发送请求，保存到数据库
          await this.$http
            .post('/borrow/insert', this.info)
            .then((res) => {
              if (res.data.code == '200') {
                this.$message.success(res.data.message)
              } else {
                this.$message.danger(res.data.message)
              }
            })
            .finally(() => {
              // 重新获取数据
              this.findAll()
            })
        })
        .catch(() => {
          this.$message.info('当前操作取消')
        })
    },

    async findAll() {
      this.bookName.page = 1
      this.page = 1
      const { data: res } = await this.$http.post(
        '/book/findAll',
        this.bookName
      )
      this.tableData = res.dataList
      this.total = res.count
    },
    async handleCurrentChange(v) {
      this.bookName.page = v
      this.page = v
      const { data: res } = await this.$http.post(
        '/book/findAll',
        this.bookName
      )
      this.tableData = res.dataList
      this.total = res.count
    },
    async handleSizeChange(v) {
      this.bookName.size = v
      this.bookName.page = 1
      this.page = 1
      const { data: res } = await this.$http.post(
        '/book/findAll',
        this.bookName
      )
      this.tableData = res.dataList
      this.total = res.count
    },
  },
}
</script>
  
  <style></style>